<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="up">
          <div class="left">
            <div class="left_up">
              <div class="elec-trend">
                <div class="elec-trend-title">设备运行台数</div>
              </div>
              <div v-for="(item, index) in countData" :key="index" class="cda">
                <div class="count">
                  <div class="count_item">
                    <div class="left_text">
                      <span class="title">{{
                        item && item.name ? item.name : "-"
                      }}</span>
                      <span class="text">{{
                        item && item.state && item.state[0]
                          ? item.state[0]
                          : "-"
                      }}</span>
                    </div>
                    <div class="number1">
                      {{
                        item && item.num && item.num[0]
                          ? parseInt(item.num[0] / 10)
                          : 0
                      }}
                    </div>
                    <div class="number2">
                      {{
                        item && item.num && item.num[0]
                          ? parseInt(item.num[0] % 10)
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="count_item">
                    <div class="text">
                      {{
                        item && item.state && item.state[1]
                          ? item.state[1]
                          : "-"
                      }}
                    </div>
                    <div class="number1">
                      {{
                        item && item.num && item.num[1]
                          ? parseInt(item.num[1] / 10)
                          : 0
                      }}
                    </div>
                    <div class="number2">
                      {{
                        item && item.num && item.num[1]
                          ? parseInt(item.num[1] % 10)
                          : 0
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="left_down">
              <div class="elec-trend">
                <div class="elec-trend-title">历史外气温湿度</div>
              </div>
              <div class="chart_frame">
                <vechart :options="humOptions" />
              </div>
            </div>
          </div>
          <div class="center">
            <div class="trans_rate">
              <div class="value">{{ showData.elec }}</div>
              <div class="unit">用电量（kWh）</div>
            </div>
            <div class="elecL">
              <div class="value">{{ showData.mlf }}</div>
              <div class="unit">中温制冷负荷（RT）</div>
            </div>
            <div class="elecH">
              <div class="value">{{ showData.mcop }}</div>
              <div class="unit">中温COP</div>
            </div>
            <div class="gasL">
              <div class="value">{{ showData.llf }}</div>
              <div class="unit">低温制冷负荷（RT）</div>
            </div>
            <div class="gasH">
              <div class="value">{{ showData.lcop }}</div>
              <div class="unit">低温COP</div>
            </div>
          </div>
          <div class="right">
            <div class="right_up">
              <div class="elec-trend">
                <div class="elec-trend-title">历史中低温系统用电量</div>
              </div>
              <div class="chart_frame">
                <vechart :options="iceOptions" />
              </div>
            </div>
            <div class="right_down">
              <div class="elec-trend">
                <div class="elec-trend-title">历史冷却塔系统用电量</div>
              </div>
              <div class="chart_frame">
                <vechart :options="barOptions" />
              </div>
            </div>
          </div>
        </div>
        <div class="down">
          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史中低温系统制冷负荷</div>
            </div>
            <div class="chart_frame">
              <vechart :options="lfOptions" />
            </div>
          </div>

          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史中低温系统COP</div>
            </div>
            <div class="chart_frame">
              <vechart :options="copOptions" />
            </div>
          </div>

          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">历史冷却水温度</div>
            </div>
            <div class="chart_frame">
              <vechart :options="witOptions" />
            </div>
          </div>
          <div class="charts">
            <div class="elec-trend">
              <div class="elec-trend-title">系统设备日用电量构成</div>
            </div>
            <div class="chart_frame">
              <vechart :options="pieOptions" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import barcharts from "./json/barcharts.json";
import linecharts from "./json/linecharts.json";
import linecharts2 from "./json/linecharts2.json";
import stackcharts from "./json/stackcharts.json";
import piecharts from "./json/piecharts.json";
import { mapState } from "vuex";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      runFlag: false,
      barcharts: barcharts,
      linecharts: linecharts,
      linecharts2: linecharts2,
      stackcharts: stackcharts,
      piecharts: piecharts,
      countData: [],
      showData: {
        llf: "-",
        mlf: "-",
        lcop: "-",
        mcop: "-",
        elec: "-",
      },
      lfData: [],
      copData: [],
      humData: [],
      witData: [],
      pieData: [],
      iceOptions: {},
      barOptions: {},
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    lfOptions() {
      if (this.lfData.length) {
        const medium = this.lfData.find((e) => e.id === "medium_chiller");
        const low = this.lfData.find((e) => e.id === "low_chiller");
        if (medium && low && medium.time) {
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.linecharts,

            xAxis: {
              ...this.linecharts.xAxis,
              data: medium.time,
              axisLabel: {
                ...this.linecharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            grid: {
              ...this.linecharts.grid,
              left: "0%",
              right: "0%",
              bottom: "5%",
            },
            yAxis: [
              {
                ...this.linecharts.yAxis[0],
                nameTextStyle: {
                  fontSize: 12,
                  color: "rgba(255,255,255)",
                  padding: [0, 0, 0, 10],
                },
              },
              {
                ...this.linecharts.yAxis[1],
                nameTextStyle: {
                  fontSize: 12,
                  color: "rgba(255,255,255)",
                  padding: [0, 30, 0, 0],
                },
              },
            ],
            series: [
              {
                ...this.linecharts.series[0],
                data: medium.value.map((i) => (i * 1).toFixed(2)),
              },
              {
                ...this.linecharts.series[1],
                data: low.value.map((i) => (i * 1).toFixed(2)),
              },
            ],
          };
        } else {
          return this.linecharts;
        }
      } else {
        return this.linecharts;
      }
    },
    copOptions() {
      if (this.copData.length) {
        const medium = this.copData.find((e) => e.id === "medium_chiller");
        const low = this.copData.find((e) => e.id === "low_chiller");
        const formatter = function (value, index) {
          console.log(value);
          return new Date(Date.parse(value)).switch("MM月dd日");
        };
        // console.log(formatter, "日期");
        return {
          ...this.linecharts,
          grid: {
            ...this.linecharts.grid,
            right: "5%",
            left:"2%"
          },
          xAxis: {
            ...this.linecharts.xAxis,
            data: low.time.length ? low.time : medium.time,
            axisLabel: {
              ...this.linecharts.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          yAxis: [
            { ...this.linecharts.yAxis[0], name: "中温系统COP" },
            { ...this.linecharts.yAxis[1], name: "低温系统COP" },
          ],
          series: [
            {
              ...this.linecharts.series[0],
              data:
                medium && medium.value
                  ? medium.value.map((i) => (i * 1).toFixed(2))
                  : [0],
            },
            {
              ...this.linecharts.series[1],
              data:
                low && low.value
                  ? low.value.map((i) => (i * 1).toFixed(2))
                  : [0],
            },
          ],
        };
      } else {
        return this.linecharts;
      }
    },
    //历史外气温湿度
    humOptions() {
      if (this.humData.length) {
        this.humData.find((item) => {
          item.value = this.numtoFiexd(item.value);
        });
        const hum = this.humData.find((e) => e.tag_id === "t");
        const wbgt = this.humData.find((e) => e.tag_id === "wbgt");
        if (hum && wbgt && hum.time) {
          const formatter = function (value, index) {
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          return {
            ...this.linecharts,
            grid: { ...this.linecharts.grid, left: "1%", right: "8%" },
            xAxis: {
              ...this.linecharts.xAxis,
              data: hum.time,
              axisLabel: {
                ...this.linecharts.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            yAxis: [
              { ...this.linecharts.yAxis[0], name: "温度(℃)" },
              { ...this.linecharts.yAxis[1], name: "湿球温度(℃)" },
            ],
            series: [
              { ...this.linecharts.series[0], name: "温度", data: hum.value },
              {
                ...this.linecharts.series[1],
                data: wbgt.value,
                name: "湿球温度",
              },
            ],
          };
        } else {
          return {
            ...this.linecharts,
            legend: {
              ...this.linecharts.legend,
              data: ["温度(℃)", "湿球温度(℃)"],
            },
            grid: { ...this.linecharts.grid, left: "1%", right: "8%" },
            yAxis: [
              { ...this.linecharts.yAxis[0], name: "温度(℃)" },
              { ...this.linecharts.yAxis[1], name: "湿球温度(℃)" },
            ],
            series: [
              { ...this.linecharts.series[0], name: "温度(℃)" },
              { ...this.linecharts.series[1], name: "湿球温度(℃)" },
            ],
          };
        }
      } else {
        return {
          ...this.linecharts,
          legend: {
            ...this.linecharts.legend,
            data: ["温度(℃)", "湿球温度(℃)"],
          },
          grid: { ...this.linecharts.grid, left: "1%", right: "8%" },
          yAxis: [
            { ...this.linecharts.yAxis[0], name: "温度(℃)" },
            { ...this.linecharts.yAxis[1], name: "湿球温度(℃)" },
          ],
          series: [
            { ...this.linecharts.series[0], name: "温度(℃)" },
            { ...this.linecharts.series[1], name: "湿球温度(℃)" },
          ],
        };
      }
    },

    witOptions() {
      if (this.witData.length) {
        this.witData.find((item) => {
          item.value = this.numtoFiexd(item.value);
        });
        const tower23 = this.witData.find((e) => e.id === "cooling23Tower");
        const tower45 = this.witData.find((e) => e.id === "cooling45Tower");
        const hottower23 = this.witData.find(
          (e) => e.id === "hotRecycle23Tower"
        );
        const hottower456 = this.witData.find(
          (e) => e.id === "hotRecycle456Tower"
        );
        if (tower23 && tower45 && hottower23 && hottower456 && tower23.time) {
          const formatter = function (value, index) {
            console.log(value);
            return new Date(Date.parse(value)).switch("MM月dd日");
          };
          console.log(formatter, "日期");
          return {
            ...this.linecharts2,
            // legend: { ...this.linecharts2.legend, data: ["温度(℃)"] },
            xAxis: {
              ...this.linecharts2.xAxis,
              data: tower23.time,
              axisLabel: {
                ...this.linecharts2.xAxis.axisLabel,
                formatter: formatter,
              },
            },
            series: [
              { ...this.linecharts2.series[0], data: tower23.value },
              { ...this.linecharts2.series[1], data: tower45.value },
              { ...this.linecharts2.series[2], data: hottower23.value },
              { ...this.linecharts2.series[3], data: hottower456.value },
            ],
          };
        } else {
          return this.linecharts2;
        }
      } else {
        return this.linecharts2;
      }
    },
    pieOptions() {
      if (this.pieData.id && this.pieData.value) {
        this.pieData.value = this.numtoFiexd(this.pieData.value);
        const arr = [];
        this.pieData.id.forEach((item, index) => {
          const i = {
            value: this.pieData.value[index],
            name: this.pieData.id[index],
          };
          arr.push(i);
        });
        return {
          ...this.piecharts,

          series: [{ ...this.piecharts.series[0], data: arr }],
        };
      } else {
        return this.piecharts;
      }
    },
  },
  created() {
    this.init();
    setInterval(() => {
      // that.runFlag = 0;
      window.location.reload();
    }, 36000000);
  },
  methods: {
    async init() {
      try {
        this.searchChillerCount();
        this.getChillerCOPOverview();
        this.searchChillerLfAndCop();
        this.searchChillerAndCooling();
        this.getChillerSystemLast7dayWbgthum();
        this.searchCoolingHistory();
        this.systemDeviceElectricityConsumption();
      } catch (e) {
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async searchChillerCount() {
      this.runFlag = 1;
      const result1 = await this.service.searchChillerCount();
      if (!result1 || !result1.data) {
        this.$notify({
          title: "设备数量获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.countData = result1.data;
      this.runFlag = 0;
    },
    async getChillerCOPOverview() {
      this.runFlag = 1;
      const result2 = await this.service.getChillerCOPOverview();
      // console.log(result2,"冰水系统cop概览数据获取失败")
      if (!result2 || !result2.data) {
        this.$notify({
          title: "cop概览数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.showData.llf = result2.data
        .find((e) => e.machine_id === "low_chiller" && e.tag_id === "lf")
        .value.toFixed(2);
      this.showData.mlf = result2.data
        .find((e) => e.machine_id === "medium_chiller" && e.tag_id === "lf")
        .value.toFixed(2);
      this.showData.lcop = result2.data
        .find((e) => e.machine_id === "low_chiller" && e.tag_id === "cop")
        .value.toFixed(2);
      this.showData.mcop = result2.data
        .find((e) => e.machine_id === "medium_chiller" && e.tag_id === "cop")
        .value.toFixed(2);
      const result8 = await this.service.getChillerSystemTotalLastdayC();
      if (!result8 || !result8.data) {
        this.$notify({
          title: "总耗电量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      this.showData.elec = result8.data[0].value.toFixed(2);
    },
    async searchChillerLfAndCop() {
      this.runFlag = 1;
      const result3 = await this.service.searchChillerLfAndCop();
      if (!result3 || !result3.data) {
        this.$notify({
          title: "历史cop数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      this.lfData = result3.data.filter((e) => e.tagId === "lf");
      this.copData = result3.data.filter((e) => e.tagId === "cop");
    },
    async searchChillerAndCooling() {
      this.runFlag = 1;
      const result4 = await this.service.searchChillerAndCooling();
      // console.log(result4);
      result4.data.find((item) => {
        item.value = this.numtoFiexd(item.value);
      });
      // console.log(result4, "冰水");
      if (!result4 || !result4.data) {
        this.$notify({
          title: "中低温、冷却塔系统用电量数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        this.iceOptions = this.stackcharts;
        this.barOptions = this.barcharts;
        // console.log()
        return;
      }
      const towerData = result4.data.find((e) => e.id === "cooling_tower");
      const lowData = result4.data.find((e) => e.id === "low_chiller");
      for (var i = 0; i < lowData.value.length; i++) {
        lowData.value[i] = lowData.value[i].toFixed(2);
      }

      const mediumData = result4.data.find((e) => e.id === "medium_chiller");
      if (
        (towerData || lowData || mediumData) &&
        (lowData.time || towerData.time)
      ) {
        // console.log(lowData, "数据");

        const formatter = function (value, index) {
          // console.log(Date.parse(value), "历史2");
          return new Date(Date.parse(value)).switch("MM月dd日");
        };

        this.iceOptions = {
          ...this.stackcharts,
          xAxis: {
            ...this.stackcharts.xAxis,
            data: lowData.time,
            axisLabel: {
              ...this.stackcharts.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [
            { ...this.stackcharts.series[0], data: mediumData.value },
            { ...this.stackcharts.series[1], data: lowData.value },
          ],
        };

        this.barOptions = {
          ...this.barcharts,
          xAxis: {
            ...this.barcharts.xAxis,
            data: towerData.time,
            axisLabel: {
              ...this.barcharts.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [{ ...this.barcharts.series[0], data: towerData.value }],
        };
      } else {
        this.iceOptions = this.stackcharts;
        this.barOptions = this.barcharts;
      }
      this.runFlag = 0;
    },
    async getChillerSystemLast7dayWbgthum() {
      this.runFlag = 1;
      const result5 = await this.service.getChillerSystemLast7dayWbgthum();
      if (!result5 || !result5.data) {
        this.$notify({
          title: "湿度数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      this.humData = result5.data;
    },
    async searchCoolingHistory() {
      this.runFlag = 1;
      const result6 = await this.service.searchCoolingHistory();
      if (!result6 || !result6.data) {
        this.$notify({
          title: "wit数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      this.witData = result6.data;
    },
    async systemDeviceElectricityConsumption() {
      this.runFlag = 1;
      const result7 = await this.service.systemDeviceElectricityConsumption();
      if (!result7 || !result7.data) {
        this.$notify({
          title: "数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
        return;
      }
      this.runFlag = 0;
      this.pieData = result7.data;
    },
    //封装 保留小数
    numtoFiexd(arr) {
      for (var i = 0; i < arr.length; i++) {
        arr[i] = Math.floor(arr[i] * 100) / 100;
      }
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 89%;
  overflow-y: scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.elec-trend {
  width: 100%;
  display: flex;
  flex-basis: 10%;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
}
.up {
  flex-basis: 65%;
  display: flex;
}
.left,
.right {
  flex-basis: 25%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.left_up,
.right_up {
  flex-basis: 55%;
  display: flex;
  flex-flow: column;
}
.left_down,
.right_down {
  flex-basis: 45%;
  display: flex;
  flex-flow: column;
}
.center {
  flex-basis: 50%;
  height: 100%;
  background: url("~@assets/report/fangkuai.png") no-repeat center center;
  background-size: 75% 35%;
  position: relative;
}
.down {
  flex-basis: 35%;
  display: flex;
  justify-content: space-between;
}
.cda {
  flex-basis: 30%;
  display: flex;
  flex-flow: column;
}
.title {
  font-size: 1.6rem;
  font-weight: 600;
  flex-basis: 25%;
}
.count {
  display: flex;
  justify-content: space-between;
  flex-basis: 75%;
}
.count_item {
  display: flex;
  align-items: center;
  flex-basis: 45%;
  justify-content: space-between;
}
.left_text {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.text {
  font-size: 1.4rem;
  color: #00f4ff;
  font-weight: 600;
  margin-right: 1rem;
}
.number1,
.number2 {
  height: 100%;
  width: 25%;
  background: url("~@assets/report/number-bg.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 600;
}
.number2 {
  margin-right: 0;
}
.center > div {
  height: 25%;
  min-width: 20%;
  position: absolute;
  background: url("~@assets/report/under.gif") no-repeat center bottom;
  background-size: 100% auto;
  // display: flex;
  // flex-flow: column;
  // justify-content: center;
}
.center .value {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 2.8rem;
  text-align: center;
}
.center .unit {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2.5rem;
  text-align: center;
}
.center .trans_rate {
  height: 40%;
  top: 10%;
  left: 40%;
  background: url("~@assets/report/fangfangkuai.gif") no-repeat center bottom;
  background-size: 100% auto;
}
.elecL {
  left: 2%;
  top: 32%;
}
.elecH {
  right: 2%;
  top: 32%;
}
.gasL {
  left: 23%;
  top: 65%;
}
.gasH {
  right: 23%;
  top: 65%;
}
.chart_frame {
  flex-basis: 90%;
  width: 100%;
}
.charts {
  flex: 1;
  height: 100%;
  display: flex;
  flex-flow: column;
}
</style>
